<template>
  <div class="loading-card-wrapper">
    <ul class="list"  ref="list" v-show="!nomore">
      <li>L</li>
      <li>O</li>
      <li>A</li>
      <li>D</li>
      <li>I</li>
      <li>N</li>
      <li>G</li>
      <li>.</li>
      <li>.</li>
      <li>.</li>
    </ul>
    <ul class="list1"  ref="list1" v-show="nomore">
      <li>N</li>
      <li>O</li>
      <li>M</li>
      <li>O</li>
      <li>R</li>
      <li>E</li>
      <li>.</li>
      <li>.</li>
      <li>.</li>
      <li>.</li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      nomore: {
        type: Boolean,
        default: () => false
      },
    },
    mounted() {
      let letters = this.$refs.list.children;
      for(let i = 0; i < letters.length; i++) {
        letters[i].style.animationDelay = (i * 0.1) + 's';
      }
    }
  }
</script>

<style lang="less" scoped>
@w: var(--loadingCardWidth);
@h: var(--loadingCardHeight);

.loading-card-wrapper {
  box-sizing: border-box;
  width: @w;
  height: @h;

  display: flex;
  justify-content: center;
  align-items: center;

  .list,
  .list1 {
    --h: calc(@h * 0.4);
    width: calc(@w * 0.7);
    height: var(--h);

    li {
      width: 10%;
      height: var(--h);
      float: left;
      
      line-height: var(--h);
      font-size: calc(var(--h) * 0.8);
      font-weight: bold;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      color: var(--lightGray);
      text-align: center;
    }
  }

  .list li {
    animation: loading 3s 0s ease-in-out infinite;
  }
}

@keyframes loading {
  from {
    transform: translateY(0);
    color: var(--lightGray);
  }
  15% {
    transform: translateY(-70%);
    color: var(--blue);
  }
  30% {
    transform: translateY(0);
    color: var(--lightGray);
  }
  to {
    transform: translateY(0);
  }
}
</style>